<template>
  <div class="mapbox">
    <div class="amap">
      <div id="container" class="container"></div>
    </div>
  </div>
</template>
<!-- <script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
<!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=341e0349d4d67c28810c82ddf58d3f99"></script> -->
<script>
import imageUrl from '@/assets/energy-consumption/GeneralSituation/icon1.png'
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  // 公司的安全密钥
  // securityJsCode: "98404c23880b42f03d5faaa96a51a4f4",
  // 我自己的安全密钥
  securityJsCode:"495b13f555dfc1483f5ab78c453e6315"
};
let AMap;
export default {
  name: "TestIndex",
  props: { mapmarkerlist: { type: Array } },
  data() {
    return {
      map: null,
      pointsss: [],
    };
  },
  methods: {
    initMap() {
var _that = this;
      AMapLoader.load({
        // 公司的Key
        // key: "36726b83d3822ae3f31648d75d5f64a2",
        // 我自己申请的key
        key:'501062f563d27a055ca9c3debff4e31e',
        version: "2.0",
        // 需要用到的插件
        plugins: [
          "AMap.Geocoder",
          "AMap.AutoComplete",
          " map.plugin",
          "AMap.MarkerClusterer",
        ],
      }).then((_amap) => {
        AMap = _amap;
        let map = new AMap.Map("container", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          defaultCursor: "grab",
          // center: [120.1302, 30.2593], // 初始化地图中心点位置
          center: this.pointsss[0]?.lnglat?this.pointsss[0].lnglat:[120.1302, 30.2593],
        });
        
        var _renderMarker = function (context) {
          var content = `
              <div class="custom-content-marker">
               <img  class="img" src="${imageUrl}">
                <div class="close-btn" >${context.data[0].name}</div>
              </div>`;
          var offset = new AMap.Pixel(-9, -9);
          context.marker.setContent(content);
          context.marker.setOffset(offset);
          // 点击跳转
          context.marker.on("click", (ev) => {
            _that.goPath(context.data[0]?.id || '')
          });
        };
        // 定义聚散
        var cluster = new AMap.MarkerCluster(map, this.pointsss, {
          gridSize: 60, // 设置网格像素大小
          renderMarker: _renderMarker, // 自定义非聚合点样式
        });
        var currentZoom = map.getZoom(); // 记录当前地图的缩放级别
        cluster.on("click", function (e) {
          // 放大地图
          // map.setZoomAndCenter(10, e.lnglat);
          if (currentZoom < 10) {
              map.setZoomAndCenter(10, e.lnglat);
              // map.setFitView(e.markers);
              currentZoom = 10;
            } else {
              map.setZoomAndCenter(currentZoom + 2, e.lnglat);
              // map.setFitView(e.markers);
              currentZoom += 2;
            }
        });
        // function
      });
    },
    goPath(id) {
      this.$router.push({
        path: '/PowerSurvey',
        query: { id }
      })
    },
  },

  mounted() {
    this.pointsss = [];
        this.mapmarkerlist.forEach((ele) => {
          this.pointsss.push({
            lnglat: [ele.lon, ele.lat],
            name: ele.companyName,
            id: ele.id,
          });
        })
    this.initMap();
  },
  created() {},
  watch: {
    deep: true,
    immediate: true,
    mapmarkerlist(val) {
      if (!val.length == 0) {
        this.pointsss = [];
        this.mapmarkerlist.forEach((ele) => {
          this.pointsss.push({
            lnglat: [ele.lon, ele.lat],
            name: ele.companyName,
            id: ele.id,
          });
        });
        this.initMap();
      } else {
        this.pointsss = [];
        this.initMap();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .amap-marker {
  width: 80px !important;
}
::v-deep .custom-content-marker {
  text-align: center;
}
::v-deep .img {
  width: 20px;
  height: 28px;
  // width: 30px !important;
  // border: 1px solid blue;
  // background-color: #fff;
  // color: #ccc;
}
::v-deep .close-btn {
  // width: 100px !important;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #008cff;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
  font-size: 12px;
  padding: 5px ;
}

.custom-content-marker .close-btn:hover {
  background: #666;
}

.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
.mapbox{
  width: 100%;
  height: 100%;
}
::v-deep.amap {
  width: 100%;
  height: 100%;
  .el-form-item {
    .el-form-item__content {
      width: 100% !important;
      .el-select {
        width: 100% !important;
      }
    }
  }
  .container {
    width: 100%;
    height: 100%;
  }
}

.el-select {
  width: 1000px;
}
::v-deep .amap-logo {
  display: none!important;
  visibility: hidden!important;
}
 
::v-deep .amap-copyright {
  display: none!important;
  visibility: hidden!important;
}
</style>
